<template>
  <el-tag
    :type="getTagType(status)"
    :color="getTagColor(status)"
    :effect="effect"
    :size="size"
    :closable="closable"
    @close="$emit('close')"
  >
    <el-icon v-if="showIcon" class="mr-1">
      <component :is="getStatusIcon(status)" />
    </el-icon>
    {{ getStatusLabel(status) }}
  </el-tag>
</template>

<script setup lang="ts">
import { 
  CircleCheck, 
  Clock, 
  Warning, 
  Tools, 
  View, 
  Close,
  Refresh,
  Select
} from '@element-plus/icons-vue'
import { useStateManager } from '@/composables/useStateManager'

interface Props {
  status: string
  effect?: 'dark' | 'light' | 'plain'
  size?: 'large' | 'default' | 'small'
  closable?: boolean
  showIcon?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  effect: 'light',
  size: 'default',
  closable: false,
  showIcon: true
})

defineEmits<{
  close: []
}>()

// 状态管理器
const { getStateDisplayName, getStateColor, getStateIcon } = useStateManager('defect')

// 状态标签类型映射
const getTagType = (status: string): 'success' | 'primary' | 'warning' | 'info' | 'danger' => {
  const color = getStateColor(status)
  // 将颜色映射为Element Plus的类型
  const colorTypeMap: Record<string, 'success' | 'primary' | 'warning' | 'info' | 'danger'> = {
    '#909399': 'info',
    '#409EFF': 'primary', 
    '#67C23A': 'success',
    '#E6A23C': 'warning',
    '#F56C6C': 'danger'
  }
  return colorTypeMap[color] || 'info'
}

// 状态标签颜色映射
const getTagColor = (status: string) => {
  return getStateColor(status)
}

// 状态标签文本映射
const getStatusLabel = (status: string) => {
  return getStateDisplayName(status) || status
}

// 状态图标映射 - 保留原有的图标映射逻辑
const getStatusIcon = (status: string) => {
  const iconMap: Record<string, any> = {
    'new': Warning,
    'assigned': Select,
    'in_progress': Tools,
    'resolved': CircleCheck,
    'verified': View,
    'closed': CircleCheck,
    'reopened': Refresh,
    'rejected': Close
  }
  return iconMap[status] || Clock
}
</script>

<style scoped>
.mr-1 {
  margin-right: 4px;
}
</style>